@extends('layouts.appManager')

@section('title')技能商城管理@endsection

@section('content')
<div class="container py-5" v-if="info">

    <br />

    <el-row :gutter="20">

        <el-col :span="6" :offset="10">
            <el-input type="number" size="mini" :min="1" :max="1000" v-model="info.spellPointRatio">
                <template slot="append">积分 = 1技能点</template>
            </el-input>
        </el-col>
        <el-col :span="4">
            <el-switch v-model="info.status" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0">
            </el-switch>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" size="mini" @click="saveConfig()">保存设置</el-button>
        </el-col>
    </el-row>

    <br>
    <el-alert
        title="请不要设置重复的技能，请不要设置通过游戏内容可以获得的技能，因为重复学习同一个技能，会导致服务端崩溃"
        type="error"
        effect="dark">
    </el-alert>
    <el-alert
        title="自由是把双刃剑，不合理的设置，将严重破坏职业平衡性，而且习得的技能将无法忘记，所以技能效果请认真确认"
        type="warning"
        effect="dark">
    </el-alert>
<div style="text-align: end;font-size: 13px;margin-top: 5px">
    <a href="http://db.wowmanage.cn/?spells" target="_blank">技能id 查询数据库 >></a>
</div>
    <hr>
    <el-tabs tab-position="left" style="height: 200px;" v-model='curIndex'>
<!--        <el-tab-pane label="公共" name="0">
            <component-spell-tree-manage v-model='info.spellTree0' :sid="serverId" :type="0" :tip="0|tip">
            </component-spell-tree-manage>
        </el-tab-pane>-->
        <el-tab-pane label="战士" name="1">
            <component-spell-tree-manage v-model='info.spellTree1' :sid="serverId" :type="1" :tip="1|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="圣骑士" name="2">
            <component-spell-tree-manage v-model='info.spellTree2' :sid="serverId" :type="2" :tip="2|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="猎人" name="3">
            <component-spell-tree-manage v-model='info.spellTree3' :sid="serverId" :type="3" :tip="3|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="潜行者" name="4">
            <component-spell-tree-manage v-model='info.spellTree4' :sid="serverId" :type="4" :tip="4|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="牧师" name="5">
            <component-spell-tree-manage v-model='info.spellTree5' :sid="serverId" :type="5" :tip="5|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="死亡骑士" name="6">
            <component-spell-tree-manage v-model='info.spellTree6' :sid="serverId" :type="6" :tip="6|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="萨满" name="7">
            <component-spell-tree-manage v-model='info.spellTree7' :sid="serverId" :type="7" :tip="7|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="法师" name="8">
            <component-spell-tree-manage v-model='info.spellTree8' :sid="serverId" :type="8" :tip="8|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="术士" name="9">
            <component-spell-tree-manage v-model='info.spellTree9' :sid="serverId" :type="9" :tip="9|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
        <el-tab-pane label="德鲁伊" name="11">
            <component-spell-tree-manage v-model='info.spellTree11' :sid="serverId" :type="11" :tip="11|tip">
            </component-spell-tree-manage>
        </el-tab-pane>
    </el-tabs>
</div>

@endsection
@section('script')

<script>
let serverId = '{{$server->id}}';

var app = new Vue({
    el: '#app',
    data: {
        serverId: parseInt(serverId),
        info: null,
        curIndex: '1',
        curSpellTree: '',
    },
    mounted() {
        this.getInfo();
    },
    filters: {
        tip(type) {
            switch (type) {
                case 0:
                    return '公共技能树：所有职业都可以学习';
                case 1:
                    return '战士专属技能树';
                case 2:
                    return '圣骑士专属技能树';
                case 3:
                    return '猎人专属技能树';
                case 4:
                    return '潜行者专属技能树';
                case 5:
                    return '牧师专属技能树';
                case 6:
                    return '死亡骑士专属技能树';
                case 7:
                    return '萨满专属技能树';
                case 8:
                    return '法师专属技能树';
                case 9:
                    return '术士专属技能树';
                case 11:
                    return '德鲁伊专属技能树';
            }
        }
    },
    methods: {
        getInfo: function() {
            var t = this;
            post("/manager/server/mallspell/" + t.serverId + "/info", {}, res => {
                t.info = res.data;
            }, t);
        },
        saveConfig() {
            var t = this;
            post("/manager/server/mallspell/" + t.serverId + "/saveConfig", {
                spellPointRatio: t.info.spellPointRatio,
                status: t.info.status
            }, res => {
                t.$message.success('保存成功');
            }, t);
        }
    }
});
</script>
@endsection
